<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>Login Page - Ace Admin</title>

    <meta name="description" content="User login page"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

    <!-- bootstrap & fontawesome -->

    <link rel="stylesheet" href="../assets/font-awesome/4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../assets/css/sweetalert.css">
    <link rel="stylesheet" href="../assets/css/style.css">
    <!-- text fonts -->
    <link rel="stylesheet" href="../assets/css/fonts.googleapis.com.css"/>

    <!-- ace styles -->
    <link rel="stylesheet" href="../assets/css/ace.min.css"/>
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../assets/css/bootstrapValidator.min.css"/>
    <style>
        .form-group{
            margin-left:0;
            margin-right: 0;
        }
    </style>
</head>

<body class="login-layout">
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="login-container">
                <div class="center">
                    <h1>
                        <i class="ace-icon fa fa-leaf green"></i>
                        <span class="red">果子</span>
                        <span class="white" id="id-text2">排课系统</span>
                    </h1>
                </div>

                <div class="space-6"></div>

                <div class="position-relative">
                    <div id="login-box" class="login-box visible widget-box no-border">
                        <div class="widget-body">
                            <div class="widget-main">
                                <h4 class="header blue lighter bigger">
                                    <i class="ace-icon fa fa-coffee green"></i>
                                    请输入账号和密码
                                </h4>

                                <div class="space-6"></div>

                                <form class="form-horizontal" id="loginForm" role="form" style="">
                                    <div class="form-group" style="margin-left: 0;margin-right: 0">
                                            <span class="block input-icon input-icon-right">
															<input type="text" class="form-control" name="code"
                                                                   placeholder="账号"/>
															<i class="ace-icon fa fa-user"></i>
														</span>
                                    </div>
                                    <div class="form-group" style="margin-left: 0;margin-right: 0">
                                           <span class="block input-icon input-icon-right">
															<input type="password"
                                                                   class="form-control" name="password"
                                                                   placeholder="密码"/>
															<i class="ace-icon fa fa-lock"></i>
														</span>
                                    </div>
                                    <div class="space"></div>

                                    <div class="clearfix">
                                        <button type="button" class="width-100 btn btn-sm btn-primary"
                                                onclick="submitForm()">
                                            <i class="ace-icon fa fa-key"></i>
                                            <span class="bigger-110">登录</span>
                                        </button>
                                    </div>

                                    <div class="space-4"></div>
                                </form>

                                <div class="social-or-login center">
                                    <span class="bigger-110"></span>
                                </div>

                                <div class="space-6"></div>

                                <div class="social-login center">
                                    <a class="btn btn-primary">
                                        <i class="ace-icon fa fa-facebook"></i>
                                    </a>

                                    <a class="btn btn-info">
                                        <i class="ace-icon fa fa-twitter"></i>
                                    </a>

                                    <a class="btn btn-danger">
                                        <i class="ace-icon fa fa-google-plus"></i>
                                    </a>
                                </div>
                            </div><!-- /.widget-main -->
                        </div><!-- /.widget-body -->
                    </div><!-- /.login-box -->
                </div><!-- /.position-relative -->

                <div class="navbar-fixed-top align-right">
                    <br/>
                    &nbsp;
                    <a id="btn-login-dark" href="#">Dark</a>
                    &nbsp;
                    <span class="blue">/</span>
                    &nbsp;
                    <a id="btn-login-blur" href="#">Blur</a>
                    &nbsp;
                    <span class="blue">/</span>
                    &nbsp;
                    <a id="btn-login-light" href="#">Light</a>
                    &nbsp; &nbsp; &nbsp;
                </div>
            </div>
        </div><!-- /.col -->
    </div><!-- /.row -->
</div><!-- /.main-container -->

<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/bootstrapValidator.min.js"></script>
<script src="../assets/js/sweetalert.min.js"></script>
<script type="text/javascript">
    $(function () {
        formValidator();
    });
    function submitForm() {
        //开启验证
        $('#loginForm').data('bootstrapValidator').validate();
        if (!$('#loginForm').data('bootstrapValidator').isValid()) {
            return;
        }
        $.ajax({
            url: "/admin/login",
            type: 'POST',
            data: $("#loginForm").serialize(),
            async: false,
            success: function (result) {
                if (result.success) {
                    window.parent.location = '/home/index';
                } else {
                    sweetAlert("Oops...", result.message, "error");
                }
            },
            error: function (result) {
                sweetAlert("Oops...", "登录失败", "error");
            }
        });
    }
    function formValidator() {
        $('#loginForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                code: {
                    message: '账号验证失败',
                    validators: {
                        notEmpty: {
                            message: '账号不能为空'
                        }
                    }
                },
                password: {
                    message: '密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                }
            },
            submitHandler: function (validator, form, submitButton) {
            }
        });
    }
    jQuery(function ($) {
        $(document).on('click', '.toolbar a[data-target]', function (e) {
            e.preventDefault();
            var target = $(this).data('target');
            $('.widget-box.visible').removeClass('visible');//hide others
            $(target).addClass('visible');//show target
        });
    });
    //you don't need this, just used for changing background
    jQuery(function ($) {
        $('#btn-login-dark').on('click', function (e) {
            $('body').attr('class', 'login-layout');
            $('#id-text2').attr('class', 'white');
            $('#id-company-text').attr('class', 'blue');

            e.preventDefault();
        });
        $('#btn-login-light').on('click', function (e) {
            $('body').attr('class', 'login-layout light-login');
            $('#id-text2').attr('class', 'grey');
            $('#id-company-text').attr('class', 'blue');

            e.preventDefault();
        });
        $('#btn-login-blur').on('click', function (e) {
            $('body').attr('class', 'login-layout blur-login');
            $('#id-text2').attr('class', 'white');
            $('#id-company-text').attr('class', 'light-blue');

            e.preventDefault();
        });

    });
</script>
</body>
</html>
